<div id="modals">
    <div class="row">
        <div class="top-handle-btn">
            <form id="search-form" action="javascript:;">
                每页显示：<input name="pageSize" class="form-control  input-small inline" type="number" min="2" max="50"
                            style="width: 80px;" value="10"/>

                <div style="display: inline-block;position: relative;top: 11px;">
                    <div class="input-group date  form_datetime " style="float: left">
                        <span style="margin:8px">下单时间</span>
                        <input type="text" size="16" name="startTime" readonly
                               class="form-control input-small inline"/>
                        <span class="input-group-btn">
                                        <button class="btn default date-set" type="button">
                                            <i class="fa fa-calendar"></i>
                                        </button>
                                        </span>
                    </div>
                    <div class="input-group date  form_datetime " style="float: left">
                        <input type="text" size="16" name="endTime" readonly
                               class="form-control input-small inline"/>
                        <span class="input-group-btn">
                                        <button class="btn default date-set" type="button">
                                            <i class="fa fa-calendar"></i>
                                        </button>
                                        </span>
                    </div>
                </div>
                <select name="orderStatus"    class="form-control input-small inline"data-width="125px">
                    <option value="">订单状态</option>
                    <option value="1">未付款</option>
                    <option value="2">未提货</option>
                    <option value="3">已完成</option>
                    <option value="4">已撤销</option>
                    <option value="5">待退款</option>
                    <option value="6">已退款</option>
                </select>
                <select name="userSchoolId"  class=" input-medium form-control inline select2-multiple">
                    <option value="">选择学校</option>
                </select>
                <select name="goodsTypeId" class=" input-medium form-control inline select2-multiple" >
                    <option value="">商品分类</option>
                </select>
                <input type="text" name="goodsName"  class="form-control input-small inline" placeholder="商品名称"/>
                <button class="btn purple right search radius6"><i class="fa fa-search"></i> 查询</button>
                <button type="button" class='btn blue output-btn radius6'  onclick="javascript:;"><i class="fa fa-download"></i> 导出</button>
            </form>
        </div>
    </div>
    <div class="row">
        <table id="data-table" class="table table-striped table-bordered table-hover" width="100%">
            <thead>
            <tr>
                <th>商品分类</th>
                <th>商品名称</th>
                <th>订单状态</th>
                <th>学校名称</th>
                <th>销售数量</th>
                <th>订单金额(元)</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
            <tr>
                <th>当前统计</th>
                <th></th>
                <th></th>
                <th></th>
                <th id="total-count"></th>
                <th style="width:320px;" id="total-fee"></th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<script type="text/javascript">



    var state = history.state;
    var url = "/order/" + state.en + "/statistic";
    $(function () {

        $(".form_datetime").datepicker({
            format: "yyyy-mm-dd",
            language: 'zh-CN',
            autoclose: 1,
        });

        $("select[name=userSchoolId]").select2();
        $("select[name=goodsTypeId]").select2();

        var date=new Date();
        date=Shinez.FormateDate(date,"yyyy-MM-dd");
        $("input[name=startTime]").val(date);
        $("input[name=endTime]").val(date);
        $('.form_datetime').datepicker('update');

        $(".output-btn")[0].onclick = function () {
            var start = $("#search-form [name=startTime]").val();
            var end = $("#search-form [name=endTime]").val();
            var status = $("#search-form [name=orderStatus]").val();
            start = start.replace(/-/g, "/");
            end = end.replace(/-/g, "/");
            var startDate = new Date(start);
            var endDate = new Date(end);
            if (start == "" || end == "" || startDate.getTime() > endDate.getTime()) {
                bootbox.alert("请选择正确的时间段");
                return;
            }
            if (status == "") {
                bootbox.alert("请选择要导出的订单状态");
                return;
            }
            var quertStr = $("#search-form ").serialize();
            output(this, '/order/' + state.en + '/statistic/output?' + quertStr);
        };
//
//        $(".date-search").datepicker({
//            format: "yyyy-mm-dd",
//            language: 'zh-CN',
//        });

        DataTable.init({
            url: url,//ajax请求url
            tableName: "data-table",//数据表table id
            paramsFormName: "search-form",//查询参数form id
            modal: "modals",//模/态框div
            columns: [//列对应的字段数组，注意顺序
                {data: "goodsType"},
                {data: "goodsName"},
                {data: "orderStatus", convert: "1=>未付款|2=>未提货|3=>已完成|4=>已撤销|5=>待退款|6=>已退款"},//1未付款 2未提货 3已完成 4已撤销 5待退款 6已退款',
                {data: "userSchool"},
                {data: "goodsCount",replaceFn:"formatThousand"},
                {data: "realPay",replaceFn:"formatThousandFix2"},
            ],
            endFnOnce: "loadSelectData",
            endFn: "loadTotal",
        });
    });

    function loadSelectData(data) {
        var schools = data.schoolyards;
        $.each(schools, function (k, v) {
            $("select[name=userSchoolId]").append("<option value='" + v.id + "'>" + v.school + "</option>");
        });

        var goodsType = data.types;
        $.each(goodsType, function (k, v) {
            $("select[name=goodsTypeId]").append("<option value='" + v.id + "'>" + v.type + "</option>");
        });
    }

    function formatThousandFix2 (num) {
        num=parseFloat(num);
        return (num.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
    }
    function formatThousand (num) {
        num=parseInt(num);
        return (num + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
    }

    function loadTotal(data) {
        var totalInfo = data.totalInfo;
        $("#total-count").html('共 <span style="color: red">'+(totalInfo == null ? 0 : formatThousand(totalInfo.goodsCount)) + '</span> 件');
        $("#total-fee").html('合计：<span style="color: red">'+(totalInfo == null ? 0 : formatThousandFix2(totalInfo.realPay))+'</span> 元');
    }
</script>